$(function(){

    pageChange(0)
    // 渲染title列表
    $.ajax({
        async:false,
        method:'get',
        url:'http://chst.vip:1234/api/getbaicaijiatitle',
        success:function(res){
            let listr = ``
            res.result.forEach(element => {
                listr+=`<li titleId=${element.titleId}>${element.title}</li>`
            });
            $('nav ul').html(listr)
        }
    })
    
    // 渲染li,根据点击的li对应的titleId访问接口
     $('nav ul li').click(function(){
         let ProId = $(this).attr('titleId')
         $(this).css('color','rgb(252, 53, 58)').siblings().css('color','#000')

         pageChange(ProId)
     })





     // 定义渲染页面函数
     function pageChange(num){
        $.ajax({
            async:false,
            method:'get',
            url:`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${num}`,
            success:function(val){
                let lisStr = ``
                val.result.forEach(item=>{
                    console.log(item);
                    lisStr+=` <li>
                                <div class="left">
                                    <img src=${item.productImg.match(/[0-9a-zA-Z:./_!]+/g)[2]} alt="">
                                </div>
                                <div class="right">
                                    <h4>
                                        <span class="cred">${item.productName.match(/[\u4e00-\u9fa5]+/g)[0]}</span>
                                        <span>${item.productName.match(/[\u4e00-\u9fa5]+/g)[1]}</span>
                                    </h4>
                                    <h3>
                                        <i>券后</i>
                                        <em>￥</em>
                                        <span>10.0</span>
                                        <del>￥100</del>
                                        <del class="del1">1888.00</del>
                                    </h3>
                                    <div class="jdt">
                                        <div class="jdtin">
                                            <span>%</span>
                                            <p></p>
                                        </div>
                                        <span>已领取111张，还剩0张</span>
                                    </div>
                                    <div class="btnyhq">
                                        点此获取优惠券
                                    </div>
                                    <div class="xdlj">
                                        下单链接
                                    </div>
                                </div>
                            </li>`
                })
                $('main ul').html(lisStr)
                JdT()
            }
        })
     }




     // 定义进度条函数
     function JdT(){
         let yiling = 126
         let shengyu = 0
         let length = 0
         // 设置比例
         let bili
         // 设置变量接收最大长度
         let largelth = $('main ul li .right .jdt .jdtin').css('width').split('.')[0]
         let time = setInterval(function(){
            shengyu = --yiling

            $('main ul li .right .jdt span').html(`已领${yiling}张/剩余${shengyu}张`)

            length+=3
            bili = parseInt(length/largelth*100)
            $('main ul li .right .jdt .jdtin span').html(`${bili}%`)
            $('main ul li .right .jdt .jdtin p').css('width',`${length}px`)
            if(length >= largelth){
                clearInterval(time)
            }
         },50)
     
     }


     toTop2()

})




